<template>
<div class="dropdown-pane" :id="id">
  <ul class="vertical menu">
    <li v-if="items && items.length > 0" v-for="(item, idx) in items" :key="idx">
      <a @click="handler(item)">{{ item.txt }}</a>
    </li>
    <li v-if="items && items.length === 0">
      <span>{{ $t('cmpt.noDataFound') }}</span>
    </li>
    <li v-if="!items">
      <span>{{ $t('cmpt.placeholder.enterAbbr') }}</span>
    </li>
  </ul>
</div>
</template>

<script>
export default {

  props: {
    id: {
      type: String,
      required: true
    },
    items: {
      type: Array
    },
    handler: {
      type: Function,
      default: () => {}
    }
  },

  i18n: {
    messages: {
      en: {
        cmpt: {
          noDataFound: "No Data Found",
          placeholder: {
            enterAbbr: "Please enter initials"
          }
        }
      },
      cn: {
        cmpt: {
          noDataFound: "数据未找到",
          placeholder: {
            enterAbbr: "请输入首字母缩写"
          }
        }
      }
    }
  }

};
</script>
